<template xmlns:el-col="http://www.w3.org/1999/html">
  <div>
    <div class="container">
      <div class="handle-box">

        <el-row>

          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
            <el-input type="text" placeholder="请输入名称" v-model="keyWord"></el-input>
          </el-col >

          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="margin-left: 130px">
            <el-button type="primary" @click="handleSearch(keyWord)">搜索</el-button>
          </el-col >

          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <el-button type="primary" icon="el-icon-plus" class="handle-del mr10 " @click="handleAdd">添加
            </el-button>
          </el-col >

          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <el-button type="primary" icon="el-icon-delete" class="handle-del mr10 deleteButtons" @click="delAllSelection">批量删除
            </el-button>
          </el-col>

          <el-col :span="4" >
            <el-upload action="http://211.69.16.108:9001/user/uploadExcel" :on-success="uploadSuccess" :on-error="uploadError">
              <el-button type="primary">
                模板导入
              </el-button>
            </el-upload>
          </el-col>

          <el-col :span="4" >
            <el-button type="primary" @click="download">模板下载</el-button>
          </el-col>


        </el-row>

      </div>
      <el-table :data="tableData"  border class="table" ref="multipleTable" header-cell-class-name="table-header"
                @selection-change="handleSelectionChange" highlight-current-row >
        <el-table-column  type="selection" align="center"/>
        <el-table-column prop="userId" label="学号/工号" min-width="180" align="center"/>
        <el-table-column prop="name" label="姓名" min-width="80"/>
        <el-table-column  label="性别" min-width="80" >
          <template slot-scope="scope">
            {{fromatSex(scope.row.sex)}}
          </template>
        </el-table-column>
        <el-table-column label="照片" align="center" min-width="100">
          <template slot-scope="scope">
            <el-image class="table-td-thumb" :src="scope.row.image" :preview-src-list="[scope.row.image]"/>
          </template>
        </el-table-column>
        <el-table-column prop="place" label="籍贯" min-width="300"/>
        <el-table-column prop="nation" label="民族" min-width="80"/>
        <el-table-column prop="position" label="职位" min-width="100"/>
        <el-table-column prop="idCard" label="身份证号" min-width="180"/>
        <el-table-column prop="phone" label="手机号" min-width="150"/>
        <el-table-column prop="joinTime" label="入党时间" min-width="120"/>
        <el-table-column prop="inTime" label="转正时间" min-width="120"/>
        <el-table-column prop="outTime" label="转出时间" min-width="120"/>
        <el-table-column label="院系" min-width="220">
          <template slot-scope="scope">
            {{scope.row.college === null ? '':scope.row.college.name}}
          </template>
        </el-table-column>

        <el-table-column label="班级" min-width="220">
          <template slot-scope="scope">
            {{scope.row.clazz === null ? '':scope.row.clazz.name}}
          </template>
        </el-table-column>

        <el-table-column label="支部" min-width="220">
          <template slot-scope="scope">
            {{scope.row.dept === null ? '' : scope.row.dept.name}}
          </template>
        </el-table-column>
        <el-table-column prop="designation" label="职称" min-width="80"/>
        <el-table-column prop="education" label="学历" min-width="80"/>
        <el-table-column prop="remark" label="备注" min-width="300"/>

        <el-table-column label="操作" min-width="180" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="editButton" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button type="text" class="editButton" icon="el-icon-edit" @click="handleReset(scope.$index, scope.row)">重置密码
            </el-button>
            <el-button type="text"  icon="el-icon-delete" class="red deleteButton" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.currentPage"
                       :page-size="query.pageSize" :total="query.total" @current-change="handlePageChange"/>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑用户信息" :visible.sync="editVisible" >
      <el-form :model="form" :label-width="formLabelWidth" :rules="rule" >
        <el-row>
          <el-col :span="12">
            <el-form-item label="工号" prop="id">
              <el-input disabled="disabled" prefix-icon="el-icon-search" placeholder="请输入学号/工号" v-model="form.userId" autocomplete="off" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label="姓名" >
              <el-input v-model="form.name" prefix-icon="el-icon-search" placeholder="请输入姓名" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-radio-group v-model="form.sex">
                <el-radio  label="男"></el-radio>
                <el-radio  label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族">
              <el-select v-model="form.nation" filterable placeholder="请选择民族">
                <el-option
                    v-for="item in nationList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input prefix-icon="el-icon-search" placeholder="请输入手机号" v-model="form.phone" autocomplete="off" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idCard">
              <el-input prefix-icon="el-icon-search" placeholder="请输入身份证号" v-model="form.idCard" autocomplete="off" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="学院">
              <el-select v-model="form.collegeId" filterable placeholder="请选择学院">
                <el-option
                        v-for="item in collegeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级">
              <el-select v-model="form.classId" filterable placeholder="请选择班级">
                <el-option
                        v-for="item in classList"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="职位">
              <el-input prefix-icon="el-icon-search" placeholder="请输入职位" v-model="form.position" autocomplete="off" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职称">
              <el-input prefix-icon="el-icon-search" placeholder="请输入职称" v-model="form.designation" autocomplete="off" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="籍贯">
              <el-cascader
                  filterable
                  placeholder="请选择籍贯"
                  v-model="selectedPlaceOptions"
                  :options="placeList"
                  :props="{ expandTrigger: 'hover' }"
                  @change="handlePlaceChange"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址">
              <el-input prefix-icon="el-icon-search" placeholder="请输入详细地址" v-model="betterPlace" autocomplete="off" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="入党时间">
              <el-date-picker
                  class="time"
                  v-model="form.joinTime"
                  type="date"
                  placeholder="选择入党时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="转正时间">
              <el-date-picker
                  class="time"
                  v-model="form.inTime"
                  type="date"
                  placeholder="选择转正时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="转出时间">
              <el-date-picker
                  class="time"
                  v-model="form.outTime"
                  type="date"
                  placeholder="选择转出时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历">
              <el-select v-model="form.education" placeholder="请选择学历">
                <el-option label="本科" value="本科"></el-option>
                <el-option label="研究生" value="研究生"></el-option>
                <el-option label="专科" value="专科"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="头像">
              <el-upload class="uploadImage"
                         action="http://211.69.16.108:9001/upload/image" :on-success="uploadAddSuccess" :on-error="uploadAddError"
              >
                <el-button icon="el-icon-circle-plus-outline" type="primary">选取头像
                </el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支部">
              <el-select v-model="form.deptId" filterable placeholder="请选择支部">
                <el-option
                        v-for="item in deptList"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item label="备注" class="remark">
            <el-input type="textarea" v-model="form.remark"></el-input>
          </el-form-item>
        </el-row>

        <el-form-item>
          <el-button class="submitButton"  type="primary" @click="edit">编辑</el-button>
          <el-button class="cancelButton" @click="cancel" >取消</el-button>
        </el-form-item>


      </el-form>
    </el-dialog>

    <!-- 添加弹出框 -->
    <el-dialog title="添加用户信息" :visible.sync="addVisible" >
      <el-form :model="form" :label-width="formLabelWidth" :rules="rule">
        <el-row>
          <el-col :span="12">
            <el-form-item label="工号" prop="id">
              <el-input  prefix-icon="el-icon-search" placeholder="请输入学号/工号" v-model="form.userId" autocomplete="off" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label="姓名">
              <el-input v-model="form.name" prefix-icon="el-icon-search" placeholder="请输入姓名" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-radio-group v-model="form.sex">
                <el-radio  label="男"></el-radio>
                <el-radio  label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族">
              <el-select v-model="form.nation" filterable placeholder="请选择民族">
                <el-option
                    v-for="item in nationList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input prefix-icon="el-icon-search" placeholder="请输入手机号" v-model="form.phone" autocomplete="off" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idCard">
              <el-input prefix-icon="el-icon-search" placeholder="请输入身份证号" v-model="form.idCard" autocomplete="off" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="学院">
              <el-select v-model="form.collegeId" filterable placeholder="请选择学院">
                <el-option
                        v-for="item in collegeList"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级">
              <el-select v-model="form.classId" filterable placeholder="请选择班级">
                <el-option
                        v-for="item in classList"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="职位">
              <el-input prefix-icon="el-icon-search" placeholder="请输入职位" v-model="form.position" autocomplete="off" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职称">
              <el-input prefix-icon="el-icon-search" placeholder="请输入职称" v-model="form.designation" autocomplete="off" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="籍贯">
              <el-cascader
                  filterable
                  placeholder="请选择籍贯"
                  v-model="selectedPlaceOptions"
                  :options="placeList"
                  :props="{ expandTrigger: 'hover' }"
                  @change="handlePlaceChange"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址">
              <el-input prefix-icon="el-icon-search" placeholder="请输入详细地址" v-model="betterPlace" autocomplete="off" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="入党时间">
              <el-date-picker
                  class="time"
                  v-model="form.joinTime"
                  type="date"
                  placeholder="选择入党时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="转正时间">
              <el-date-picker
                  class="time"
                  v-model="form.inTime"
                  type="date"
                  placeholder="选择转正时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="转出时间">
              <el-date-picker
                  class="time"
                  v-model="form.outTime"
                  type="date"
                  placeholder="选择转出时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">


            <el-form-item label="学历">
              <el-select v-model="form.education" placeholder="请选择学历">
                <el-option label="本科" value="本科"></el-option>
                <el-option label="研究生" value="研究生"></el-option>
                <el-option label="专科" value="专科"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="头像">
              <el-upload class="uploadImage"
                         action="http://211.69.16.108:9001/upload/image" :on-success="uploadAddSuccess" :on-error="uploadAddError"
              >
                <el-button icon="el-icon-circle-plus-outline" type="primary">选取头像
                </el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支部">
              <el-select v-model="form.deptId" filterable placeholder="请选择支部">
                <el-option
                        v-for="item in deptList"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item label="备注" class="remark">
            <el-input type="textarea" v-model="form.remark"></el-input>
          </el-form-item>
        </el-row>

        <el-form-item>
          <el-button class="submitButton"  type="primary" @click="submit">添加</el-button>
          <el-button class="cancelButton" @click="cancel" >取消</el-button>
        </el-form-item>


      </el-form>
    </el-dialog>

    <!-- 重置密码框 -->
    <el-dialog title="重置用户信息" :visible.sync="resetVisible" width="30%">
      <el-form :model="form" :label-width="formLabelWidth">
        <el-row>
            <el-form-item label="工号" prop="id">
              <el-input disabled  prefix-icon="el-icon-search" placeholder="请输入学号/工号" v-model="form.id" autocomplete="off" ></el-input>
            </el-form-item>
        </el-row>

        <el-row>
          <el-form-item  label="新密码">
            <el-input v-model="newPassword" prefix-icon="el-icon-search" placeholder="请输入重置后的密码" autocomplete="off"></el-input>
          </el-form-item>
        </el-row>


        <el-form-item>
          <el-button class="submitButton"  type="primary" @click="reset">修改</el-button>
          <el-button class="cancelButton" @click="cancel" >取消</el-button>
        </el-form-item>


      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import info from '../../utils/info';
  import nation from '../../utils/nation'
  import {regionData,CodeToText} from 'element-china-area-data'
  import '../../assets/css/user.css'
  import {
    queryUsers,
    queryClazzs,
    addUser,
    deleteUsers,
    updatePasswordByUsername,
    queryColleges,
    queryDeptByPage, updateUser, deleteUserById
  } from '../../api';

  export default {
    name: 'basetable',
    data() {
      return {
        keyWord: '',
        clazz:[],
        placeList: [],
        selectedPlaceOptions: [],
        selectedClazzOptions: [],
        selectedDeptOptions:[],
        nationList: [],
        /* 分页 */
        query: {
          total: 10,
          pageSize: 7,
          currentPage: 1,
        },
        tableData: [],
        multipleSelection: [],
        delList: [],
        editVisible: false,
        addVisible: false,
        resetVisible: false,
        pageTotal: 0,
        newPassword: '',

        form: {
          classId: "",
          collegeId: "",
          clazz: {
            clazzId: "",
            collegeId: "",
            collegeName: "",
            name: ""
          },
          dept: {
            deptId: "",
            info: "",
            name: "",
            parentId: ""
          },
          deptId: "",
          designation: "",
          education: "",
          idCard: "",
          image: "",
          inTime: "",
          joinTime: "",
          name: "",
          nation: "",
          outTime: "",
          password: "",
          phone: "",
          place: "",
          position: "",
          remark: "",
          salt: "",
          sex: "",
          userId: ""
        },
        idx: -1,
        id: -1,
        classList: [],
        collegeList: [],
        deptList: [],
        formLabelWidth: '30%',
        betterPlace: '',

        /* 校验规则 */
        rule: {
          id: [
            { required: true,message: '请输入工号',trigger: 'blur'},
            { min: 10,max: 10,message: '长度为10个数字字符',trigger: 'blur'},
            { required: true,
              pattern: /^\d{10}$/,
              message: '格式错误,应为数字格式',
              trigger: 'blur'
            }
          ],
          phone: [
            { required: true,message: '请输入工号',trigger: 'blur'},
            {
              required: true,
              pattern: /^(13[0-9]|17[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
              message: '格式错误',
              trigger: 'blur'
            }
          ],
          idCard: [
            { required: true,message: '请输入工号',trigger: 'blur'},
            {
              required: true,
              pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
              message: '格式错误',
              trigger: 'blur'
            }
          ]

        }
      }
    },
    created() {
      this.getData();
    },
    activated: function() {
      this.getData();
    },

    methods: {
      // 获取 easy-mock 的模拟数据
      async getData() {

        let current = this.query.currentPage;
        let size = this.query.pageSize;
        let name = this.keyWord;
        const data = await queryUsers({name:name,current:current,size:size});
        console.log(data);

        this.tableData = data.records;
        this.query.total = data.total;


        //获取班级列表
        let clazzList = [];
        let collegeList = [];

        const classList =  await queryClazzs();
        //console.log(classList);

        for(let i = 0;i < classList.list.length;i++){
          let clazzValue = classList.list[i].clazzId;
          let clazzLabel = classList.list[i].name;
          let clazz = {
            value: clazzValue,
            label: clazzLabel
          };
          clazzList.push(clazz);
        }

        const colleges = await queryColleges({current:1,size:100});
        for(let i = 0;i < colleges.records.length;i++){
          let collegeValue = colleges.records[i].collegeId;
          let collegeLabel = colleges.records[i].name;
          let college = {
            value: collegeValue,
            label: collegeLabel
          };
          collegeList.push(college);
        }
        console.log(colleges);

        let deptList = [];

        const depts = await queryDeptByPage({current:1,size:100});
        console.log(depts);
        for(let i = 0;i < depts.records.length;i++){
          let value = depts.records[i].deptId;
          let label = depts.records[i].name;
          let dept = {
            value: value,
            label: label
          };
          deptList.push(dept);
        }
        this.classList = clazzList;
        this.collegeList = collegeList;
        this.deptList = deptList;

        // 获取院系列表
        this.placeList = regionData;
        this.nationList = nation.nationList;
      },

      // 拼接地区级联选择器
      handlePlaceChange() {
        let loc = "";
        for (let i = 0; i < this.selectedPlaceOptions.length; i++) {
          loc += CodeToText[this.selectedPlaceOptions[i]];
        }
        console.log(loc);
        this.form.place = loc;
      },



      // 触发添加页面
      handleAdd(){
        this.addVisible = true;
      },

      // 触发搜索按钮
      async handleSearch(keyWord) {

        let name = this.keyWord;
        let current = this.query.currentPage;
        let size = this.query.pageSize;
        await queryUsers({ name:name, current:current, size:size});

        // 发送查询请求,查询内容为keyWord
        // 获取返回数据然后渲染表格
        this.getData();
      },

      // 删除操作
      async handleDelete(index, row) {

        let Id = row.userId;
        await deleteUserById({ Id });

        this.getData();
      },

      // 上传图片
      uploadAddSuccess(res){
        console.log(res);
        this.$message.success("上传成功!")
        this.form.image = res.data.url;
        console.log(this.form.image);
      },
      uploadAddError(res){
        console.log(res);
        this.$message.success("上传失败!");
      },

      uploadExcel(){
        // 发送请求上传Excel
        //渲染数据
      }

      ,
      // 多选操作
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 多删
      async delAllSelection() {
        // 获得多选删除的id数组
        const length = this.multipleSelection.length;
        console.log(length);
        if (length === 0) {
          this.$message.error(`请选择要删除的对象`);
        } else {
          let list = [];
          this.delList = this.delList.concat(this.multipleSelection);
          for (let i = 0; i < length; i++) {
            list.push(this.multipleSelection[i].userId);
          }
          console.log(list);

          //await deleteUsers({ list });

          this.multipleSelection = [];
        }

      },

      uploadSuccess(res){
        console.log(res);
        this.$message.success("导入成功!");
        this.getData();
      },
      uploadError(res){
        console.log(res);
        this.$message.success("导入失败!");
      },


      download(){
        this.$axios.request({
          url: '/user/download',
          method: 'get',
          responseType: 'blob',
        }).then(res => {
          const data = res.data;
          let url = window.URL.createObjectURL(data);
          let a = document.createElement('a');
          document.body.appendChild(a);
          a.href = url;
          a.download = '用户信息模板.xlsx';
          a.click();
          window.URL.revokeObjectURL(url);
        })
      },


      fromatSex(sex){
        return sex === '1' ? '男': '女';
      },

      // 编辑操作
      handleEdit(index, row) {
        this.idx = index;
        this.editVisible = true;
        this.form.userId = row.userId;
        this.form = row;
      },

      // 重置密码
      handleReset(index,row){
        this.idx = index;
        this.form.userId = row.userId;
        this.resetVisible = true;
      },

      // 分页导航
      async handlePageChange(val) {
        console.log(val);
        let current = val;
        let size = this.query.pageSize;
        let name = this.keyWord;
        const data = await queryUsers({name:name, current: current, size: size });
        this.tableData = data.records;
      },

      // 提交表单
      async submit() {
        console.log(this.form);

        let userId = this.form.userId;
        let classId = this.form.classId;
        let collegeId = this.form.collegeId;
        let deptId = this.form.deptId;
        let designation = this.form.designation;
        let education = this.form.education;
        let idCard = this.form.idCard;
        let image = (this.form.image === undefined ? '': this.form.image);
        let inTime = isNaN(new Date(this.form.inTime).getTime()) ? '' :new Date(this.form.inTime).getTime();
        let joinTime = isNaN(new Date(this.form.joinTime).getTime()) ? '':new Date(this.form.joinTime).getTime();
        let name = this.form.name;
        let nation = this.form.nation ;
        let outTime = isNaN(new Date(this.form.outTime).getTime()) ? '':new Date(this.form.outTime).getTime();
        // 密码默认为学号
        let password = this.form.userId;
        let phone = this.form.phone;
        let place = this.form.place+ this.betterPlace;
        let position = this.form.position;
        let remark = this.form.remark;
        let sex = this.form.sex;

        console.log(classId);


        await addUser({classId,collegeId,deptId,designation,education,idCard,image,inTime,joinTime,name,nation,outTime,password,phone,place,position,remark,sex,userId});

        this.addVisible = false;
        this.$notify.success({
          title: '添加成功',
          message: '密码已被设置为该用户的学号'
        })
        // 页面重新渲染
      },

      // 编辑表单
      async edit() {

        let userId = this.form.userId;
        let classId = this.form.classId;
        let collegeId = this.form.collegeId;
        let deptId = this.form.deptId;
        let designation = this.form.designation;
        let education = this.form.education;
        let idCard = this.form.idCard;
        let image = (this.form.image === undefined ? '' : this.form.image);
        let inTime = isNaN(new Date(this.form.inTime).getTime()) ? '' :new Date(this.form.inTime).getTime();
        let joinTime = isNaN(new Date(this.form.joinTime).getTime()) ? '':new Date(this.form.joinTime).getTime();
        let name = this.form.name;
        let nation = this.form.nation;
        let outTime = isNaN(new Date(this.form.outTime).getTime()) ? '':new Date(this.form.outTime).getTime();
        // 密码默认为学号
        let password = this.form.userId;
        let phone = this.form.phone;
        let place = this.form.place + this.betterPlace;
        let position = this.form.position;
        let remark = this.form.remark;
        let sex = this.form.sex;
        console.log(classId);

        await updateUser({
          classId,
          collegeId,
          deptId,
          designation,
          education,
          idCard,
          image,
          inTime,
          joinTime,
          name,
          nation,
          outTime,
          password,
          phone,
          place,
          position,
          remark,
          sex,
          userId
        });

        this.getData();

        //数据校验

        //提交表单数据

        this.editVisible = false;
        this.$notify.success({
          title: '修改用户信息',
          message: '修改成功!'
        })

        // 页面重新渲染
      },

      // 用户重置密码
      async reset() {

        console.log(this.form.userId);
        console.log(this.newPassword);

        let username = this.form.userId;
        let password = this.newPassword;

        await updatePasswordByUsername({username,password});


        // 发送修改密码的请求

        this.$message.success("重置密码成功!");
        this.resetVisible = false;
        this.newPassword = '';
      },

      // 取消表单
      cancel(){
        this.form = {};
        this.newPassword = '';
        this.addVisible = false;
        this.editVisible = false;
        this.resetVisible = false;
      },


      //提交成功!
      submitSuccess() {
        this.$notify({
          title: '成功',
          message: '添加用户成功!',
          type: 'success'
        });
      },
      editSuccess() {
        this.$notify({
          title: '成功',
          message: '编辑用户成功!',
          type: 'success'
        });
      },
    },
    watch: {

      addVisible(){
        if(this.addVisible === false){
          this.form = {};
        }
      },
      editVisible(){
        if(this.editVisible === false){
          this.form = {};
        }
      }
    }
  };
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }


  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .time{
    width: 100%;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }

  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }

  /* 提交按钮 */
  .submitButton{
    margin-left: 20%;
  }

  /* 取消按钮 */
  .cancelButton{
    margin-left: 20%;
  }

  /* 上传Excel */
  .uploadExcel{
    float: right;
    margin-right: 5%;
  }

  /* 删除 搜索 按钮 */
  .deleteButtons{
    margin-left: -30%;
  }
  .searchButton{
    margin-left: 20%;
  }

  /* 上传按钮浮动 */
  .uploadExcel{
    float: left;
  }

  .uploadImage{
    float: left;
  }

  /* 按钮大小 */
  .editButton,.deleteButton{
    font-size: 14px;
  }

  .remark{
    float: left;
    margin-left: 5%;
    width: 70%;
  }

</style>
